<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业-选项卡</title>
</head>
<body>
    <div class="container">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>
    <div class="container2">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>
    <div class="container3">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>
    <button class="next">下一个</button>
</body>
</html>
<script>
    
    // 第一个选项卡
    let btns = document.querySelectorAll(".container button");
    let divs = document.querySelectorAll(".container div");
    new Tab(btns,divs);


    // 第二个选项卡
    let btns2 = document.querySelectorAll(".container2 button");
    let divs2 = document.querySelectorAll(".container2 div");
    var tab2 = new Tab(btns2,divs2);
    let key = 0;
    setInterval(()=>{
        tab2.changeTab(key);
        key++;
        if(key>2){
            key = 0;
        }
    },1000)


    // 第三个选项卡
    let btns3 = document.querySelectorAll(".container3 button");
    let divs3 = document.querySelectorAll(".container3 div");
    let tab3 = new Tab(btns3,divs3);
    let key2 = 0;
    document.querySelector(".next").onclick = function(){
        tab3.changeTab(key2);
        key2++;
        if(key2>2){
            key2 = 0;
        }
    }



    function Tab(btns,divs){
        this.btns = btns;
        this.divs = divs;
        this.btns.forEach((btn,key)=>{
            btn.onclick = ()=>{
                console.log("点击了按钮",key);
                // 把索引和按钮索引一样的显示出来
                this.changeTab(key);
            }
        })
    }

    Tab.prototype.changeTab = function(key){
        this.divs.forEach((div,k)=>{
            if(key==k){
                // 显示出来
                div.style.display = "block";
            }else{
                div.style.display = "none";
            }
        })
    }
</script>